import type { GetServerSideProps } from "next";
import "../../app/globals.css";
import CompactTable from "@/components/CompactTable/CompactTable";
import DataChart from "@/components/DataChart/DataChart";
import Divider from "@/components/Divider/Divider";
import Footer from "@/components/Footer/Footer";
import ChannelCard from "@/components/ChannelCard/ChannelCard"
import Head from "next/head";
import TitleBar from "../../components/TitleBar/TitleBar";
interface ChannelDataProp {
channel_id: string;
channel_name: string;
profile_pic: string;
subscribers: number;
sub_org: string;
video_count: number;
view_count: number;
next_milestone: string;
days_until_next_milestone: string;
next_milestone_date: string;
}
interface GraphDataProp {
labels: string[];
datasets: number[];
}
interface CompactTableProps {
dates: string[];
milestones: string[];
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const { slug } = context.params || {};
const chartData = await getGraphData(slug as string);
const channelData = await getChannelData(slug as string);
const sevenDayGraphData = await get7DGraphData(slug as string);
const milestoneData = await getMilestoneData(slug as string);
return {
props: {
chartData,
channelData,
slug,
sevenDayGraphData,
milestoneData,
},
};
};
function Page({
chartData,
channelData,
sevenDayGraphData,
slug,
milestoneData,
}: {
chartData: GraphDataProp;
channelData: ChannelDataProp;
sevenDayGraphData: GraphDataProp;
slug: string;
milestoneData: CompactTableProps;
}) {
return (
<>
{slug as string} - PhaseTracker
);
}
async function getGraphData(slug: string) {
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const response = await fetch(apiUrl + `/api/subscribers/${encodedSlug}`, {
headers: {
"Cache-Control": "no-cache",
},
cache: "no-cache",
});
if (!response.ok) {
console.log(response.statusText);
}
return response.json();
}
async function getChannelData(slug: string) {
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const response = await fetch(apiUrl + `/api/channel/${encodedSlug}`, {
headers: {
"Cache-Control": "no-cache",
},
cache: "no-cache",
});
if (!response.ok) {
console.log(response.statusText);
}
return response.json();
}
async function get7DGraphData(slug: string) {
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const response = await fetch(apiUrl + `/api/subscribers/${encodedSlug}/7d`, {
headers: {
"Cache-Control": "no-cache",
},
cache: "no-cache",
});
if (!response.ok) {
console.log(response.statusText);
}
return response.json();
}
async function getMilestoneData(slug: string) {
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const response = await fetch(
apiUrl + `/api/subscribers/${encodedSlug}/milestones`,
{
headers: {
"Cache-Control": "no-cache",
},
cache: "no-cache",
},
);
if (!response.ok) {
console.log(response.statusText);
}
return response.json();
}
export default Page;